import React from 'react';
import { Card, CardContent } from '@mui/material';
import { styled } from '@mui/material/styles';
import { motion } from 'framer-motion';

// 使用Framer Motion增强的Card
const MotionCard = motion(Card);

const StyledCard = styled(MotionCard)(({ theme }) => ({
    borderRadius: '16px',
    boxShadow: '0 10px 40px rgba(0, 0, 0, 0.1)',
    overflow: 'hidden',
    backdropFilter: 'blur(10px)',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    [theme.breakpoints.up('md')]: {
        padding: theme.spacing(4),
    },
    [theme.breakpoints.down('md')]: {
        padding: theme.spacing(3),
    },
    [theme.breakpoints.down('sm')]: {
        padding: theme.spacing(2),
    },
}));

const AnimatedCard = ({ children, ...props }) => {
    return (
        <StyledCard
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.5 }}
            {...props}
        >
            <CardContent>{children}</CardContent>
        </StyledCard>
    );
};

export default AnimatedCard; 